<template>
  <div class="login-content">
    <wx-input @getValues="getValuesName" :datas="username"></wx-input>
    <wx-input @getValues="getValuesPwd" :datas="pwd"></wx-input>
    <div style="margin-top: 20px">
      <span @click="loginNow">
        <wx-button :datas="loginBtn"></wx-button>
      </span>
    </div>
    <span style="margin-top: 15px;letter-spacing: 2px;" @click="goRegister">前往注册</span>
  </div>
</template>

<script>
import wxInput from '@/components/wxInput'
import wxButton from '@/components/wxButton'
import { mapActions } from 'vuex'
export default {
  name: 'login',
  components: {
    wxInput, wxButton
  },
  data () {
    return {
      login_bg: require('../../../static/bg-img/b9.jpg'),
      loginData: {
        telephone: -1,
        password: -1
      },
      username: {
        label: 'telephone',
        type: 'text',
        id: 'telephone'
      },
      pwd: {
        label: 'password',
        type: 'password',
        id: 'user2'
      },
      loginBtn: {
        text: 'LOGIN'
      }
    }
  },
  methods: {
    getValuesName (val) {
      if (!val) return false
      this.loginData.telephone = val
    },
    getValuesPwd (val) {
      if (!val) return false
      this.loginData.password = val
    },
    goRegister () {
      this.$router.push({name: 'register'})
    },
    loginNow () {
      let params = {
        telephone: this.loginData.telephone,
        password: this.loginData.password
      }
      let _this = this
      this._login(params)
        .then((res) => {
          let params = {
            token: res.data.result.token
          }
          _this._getUserInfo(params)
            .then((res) => {
              _this.$notify({
                title: '欢迎回来',
                type: 'success',
                duration: 1000
              })
              _this.$router.push({name: 'home'})
            })
            .catch((err) => {
              return Promise.reject(err)
            })
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    },
    ...mapActions(['_login', '_getUserInfo'])
  }
}
</script>

<style scoped lang="less">

  .login-content{
    text-align: center;
  }
</style>
